<template>
  <div>
    <div class="homeindex_top">
      <img :src="solution" alt="" />
    </div>

    <div class="content">
      <div class="tab_text">
        <div
          v-for="nav in list"
          :key="nav.id"
          :class="nav.booler ? 'tabture' : ''"
          @click="tab(nav.id)"
        >
          {{ nav.name }}
        </div>
      </div>
      <!-- 品牌介绍 -->
      <div class="tab_content" v-if="type == '1'">
        <div class="taito_text">
          <h1>关于历下控股</h1>
          <p>ON THE CALENDAR HOLDING</p>
          <div>
            <div class="tab_contenttop thre">
              济南历下控股集团有限公司(以下简称"历下控股集团")成立于2016年7月，是经济南市历下区人民政府批准成立的国有平台公司。成立以来，历下控股集团始终坚持以创造价值、服务城市发展为中心，坚持以政府为引导、资本为纽带、市场为导向、重大项目为带动，紧紧围绕明府城保护开发、中央商务区招商建设~两大主战场”，全面推进招商引资、项目建设、棚改旧改、投资融资、产业培育等各项重点工作。经过五年多的快速发展，历下控股集团已经发展成为下辖13家全资子公司，1家合资参股公司，资产规模超460亿元，信用评级AA+，搭建形成城市开发
            </div>
            <div></div>
          </div>
        </div>
        <div class="taito_text">
          <h1>关于丽山公司</h1>
          <p>about the lishan company</p>
          <div>
            <div class="tab_contenttop two">
              山东丽山投资控股有限公司(以下简称°丽山公司")成立于2017年1月，注册资本5000万元，是济南历下控股集团有限公司的全资子公司，主要负责医养健康产业的资源整合、全域产业开发、生态链条建设与运营。脉承历下控股让城市更美好的企业使命，丽山公司将增进民生福祉为己任，贯彻国家大健康战略，紧紧围绕健康山东2030规划纲要，引领大健康产业蓬勃发展，助力加快新旧动能转换，助推建设"大强美富通"现代化国际大都市。丽山公司始终把创新摆在企业发展全局的核心位置，坚持产业创新、模式创新、发展创新，推动生命质量不断提升。经过五
            </div>
            <div></div>
          </div>
        </div>
        <div class="taito_text">
          <h1>关于医养健康</h1>
          <p>about medical health care</p>
          <div>
            <div class="tab_contenttop two">
              丽山公司践行健康中国2030的国家战略，以大健康产业为核心阵地，康养服务+生物医药两大领域齐头并进，引领医养健康产业蓬勃发展。在康养服务模块，创新康养服务模式，拓展康养服务领域，加快推进医养结合，致力于推动康养服务社会化、产业化，开展养老综合体、健康综合体、养老公寓、医疗康养产业园等服务设施建设，打造济南历下区区域康养服务生态圈。
              在生物医药模块，肩负起济南市细胞与基因治疗产业链条^建链、补链、强链、延链"的重大使命，发挥资源整合的优势，构建全市生物医药产业新高地，打造一体化产业支撑平台，满足细胞与基因治疗
            </div>
            <div></div>
          </div>
        </div>
      </div>

      <!-- 文化概念 -->
      <div class="tab_content" v-if="type == '2'">
        <div class="cultural_concept">
          <h1>文化理念</h1>
          <p>COMPANY CULTURE</p>
        </div>
        <div class="content_a">
          <p>发展愿景</p>
          <p>成为市场化、专业化、品牌化的城市运营综合服务商</p>
        </div>
        <div class="content_a">
          <p>核心价值观</p>
          <p>止于至善、义利共赢</p>
        </div>
        <div class="content_a">
          <p>企业精神</p>
          <p>职业、专业、敬业、乐业</p>
        </div>
        <div class="content_a">
          <p>经营理念</p>
          <p>客户导向，规范高效，创新求变，卓业至善</p>
        </div>
        <!-- 底部 -->
        <div style="height: 8rem"></div>
      </div>

      <!-- 发展历程 -->
      <div class="tab_content" v-if="type == '3'">
        <div class="cultural_concept">
          <h1>发展历程</h1>
          <p>DEVELOPMENT HISTORY</p>
        </div>
        <div class="content_a">
          <p>2016年</p>
          <div class="date_list">
            <div class="date_list_a">
              <div>07-18</div>
              <div>历下控股在济南市历下区市场监督管理局登记成立</div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-08</div>
              <div>济南易通市政工程有限公司无偿划转工作顺利完成</div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>历下区政府、历下控股集团与分享通信集团签署战略合作协议</div>
            </div>
          </div>
        </div>
        <div class="content_a">
          <p>2017年</p>
          <div class="date_list">
            <div class="date_list_a">
              <div>07-18</div>
              <div>
                历下区政府、历下控股集团与山东省鲁信投资控股集团有限公司签署战略合作协议
              </div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-08</div>
              <div>
                历下区政府、历下控股集团与格力电器山东分公司签署战略合作协议
              </div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>历下区政府、历下控股集团与分享通信集团签署战略合作协议</div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>
                历下区政府、历下控股集团与中泰证券签署战略合作协议签约仪式
              </div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>
                历下控股集团与山东红四月品牌管理有限公司入驻奥体金融中心举行签约仪式
              </div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>
                历下控股集团首座自建商业地产暨历下金融商务服务中心B栋举行封顶仪式
              </div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>
                历下区政府、历下控股集团与齐鲁交通发展集团签订战略合作协议
              </div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>
                齐鲁银行入驻历下金融商务服务中心签约仪式在历下控股集团举行
              </div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>历下控股集团与山东师大基础教育集团举行战略合作签约仪式</div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>11-27</div>
              <div>历下控股集团开发建设的奥体金融中心项目举行封顶仪式</div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>09-21</div>
              <div>
                新旧动能转换示范区项目暨山东发展投资集团、历下区人民政府、济阳县人民政府举行战略合作协议签约仪式
              </div>
            </div>
          </div>
          <div class="date_list">
            <div class="date_list_a">
              <div>09-29</div>
              <div>
                历下区与加拿大富邦国际投资有限公司战略合作协议签约仪式在历下控股集团举行
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 企业荣誉 -->
      <div class="tab_content" v-if="type == '4'">
        <div class="cultural_concept">
          <h1>荣誉奖项</h1>
          <p>HONORARY AWARDS</p>
        </div>
        <div class="honor">
          <div class="honor_a">
            <dir class="hoor_a_img hidd">
              <img src="../../../../assets/images/u36.jpg" alt="" />
            </dir>
            <div class="hoor_a_text">
              <p class="a">济南养老服务发展促进会理事单位</p>
              <hr />
              <p class="b">2022-03-09</p>
            </div>
          </div>
          <div class="honor_a">
            <dir class="hoor_a_img hidd">
              <img src="../../../../assets/images/u36.jpg" alt="" />
            </dir>
            <div class="hoor_a_text">
              <p class="a">济南养老服务发展促进会理事单位</p>
              <hr />
              <p class="b">2022-03-09</p>
            </div>
          </div>
          <div class="honor_a">
            <dir class="hoor_a_img hidd">
              <img src="../../../../assets/images/u36.jpg" alt="" />
            </dir>
            <div class="hoor_a_text">
              <p class="a">济南养老服务发展促进会理事单位</p>
              <hr />
              <p class="b">2022-03-09</p>
            </div>
          </div>
          <div class="honor_a">
            <dir class="hoor_a_img hidd">
              <img src="../../../../assets/images/u36.jpg" alt="" />
            </dir>
            <div class="hoor_a_text">
              <p class="a">济南养老服务发展促进会理事单位</p>
              <hr />
              <p class="b">2022-03-09</p>
            </div>
          </div>
          <div class="honor_a">
            <dir class="hoor_a_img hidd">
              <img src="../../../../assets/images/u36.jpg" alt="" />
            </dir>
            <div class="hoor_a_text">
              <p class="a">济南养老服务发展促进会理事单位</p>
              <hr />
              <p class="b">2022-03-09</p>
            </div>
          </div>
          <div class="honor_a">
            <dir class="hoor_a_img hidd">
              <img src="../../../../assets/images/u36.jpg" alt="" />
            </dir>
            <div class="hoor_a_text">
              <p class="a">济南养老服务发展促进会理事单位</p>
              <hr />
              <p class="b">2022-03-09</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 合作伙伴 -->

      <div class="tab_content" v-if="type == '5'">
        <div class="cultural_concept">
          <h1>合作伙伴</h1>
          <p>COOPERATIVE PARTNER</p>
        </div>
        <div class="honor">
          <div class="cooperation_a">
            <div class="cooperation_a_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="cooperation_a_text">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="cooperation_a">
            <div class="cooperation_a_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="cooperation_a_text">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="cooperation_a">
            <div class="cooperation_a_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="cooperation_a_text">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="cooperation_a">
            <div class="cooperation_a_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="cooperation_a_text">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="cooperation_a">
            <div class="cooperation_a_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="cooperation_a_text">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="cooperation_a">
            <div class="cooperation_a_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="cooperation_a_text">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="cooperation_a">
            <div class="cooperation_a_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="cooperation_a_text">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="cooperation_a">
            <div class="cooperation_a_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="cooperation_a_text">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import solution from "@/assets/images/site/solution.png";
let ulrr = window.location.search.substring(6) || "1";
export default {
  data() {
    return {
      solution:solution,
      list: [
        {
          name: "品牌介绍",
          url: "#",
          booler: true,
          id: "1",
        },
        {
          name: "文化理念",
          url: "#",
          booler: false,
          id: "2",
        },
        {
          name: "发展历程",
          url: "#",
          booler: false,
          id: "3",
        },
        {
          name: "企业荣誉",
          url: "#",
          booler: false,
          id: "4",
        },
        {
          name: "合作伙伴",
          url: "#",
          booler: false,
          id: "5",
        },
      ],
      type: 1,
    };
  },
  created() {
    this.tab(ulrr);
  },
  methods: {
    tab(i) {
      console.log(i);
      for (const a of this.list) {
        if (a.id == i) {
          a.booler = true;
        } else {
          a.booler = false;
        }
      }
      this.type = i;
    },
  },
};
</script>
<style scoped>
:hover {
  cursor: pointer;
}
.homeindex_top img {
  width: 100%;
  height: 44rem;
  object-fit: cover;
}
.content {
  margin: 8rem 36rem 0px 36rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
}
.tab_text {
  display: flex;
  width: 100%;
  border-bottom: 3px solid #299399;
}
.tab_text > div {
  width: 24rem;
  height: 6rem;
  text-align: center;
  font-size: 2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  line-height: 6rem;
}
.tabture {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  background: #299399;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.tab_content {
  margin-top: 11.4rem;
}
.taito_text {
  margin-bottom: 11.4rem;
}
.taito_text h1 {
  color: #d51010;
  font-size: 4rem;
}
.taito_text p {
  color: #d51010;
  font-size: 2.4rem;
}
.tab_contenttop {
  font-size: 2rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 4rem;
  margin-top: 4.8rem;
}
.thre {
  width: 72rem;
}
.cultural_concept {
  margin-bottom: 4.8rem;
}
.cultural_concept h1 {
  color: #d51010;
  font-size: 4rem;
}
.cultural_concept p {
  color: #d51010;
  font-size: 2.4rem;
}
.content_a {
  line-height: 6.6rem;
  margin-bottom: 4rem;
}
.content_a p:nth-child(1) {
  font-size: 2.4rem;
  font-weight: 800;
  color: #d51010;
}
.content_a p:nth-child(2) {
  font-size: 4rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  line-height: 60px;
}
.date_list {
  margin-left: 5.2rem;
  line-height: 4.4rem;
  /* margin-top: 2.2rem; */
}
.date_list_a div:nth-child(1) {
  font-size: 2.4rem;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.65);
  line-height: 7rem;
  width: 10rem;
}
.date_list_a div:nth-child(2) {
  margin-left: 4rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  font-size: 2.8rem;
  width: 100rem;
}
.date_list_a {
  display: flex;
  align-items: baseline;
}

.honor {
  /* line-height: 1.6rem; */
  margin-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.honor_a {
  width: 37.8rem;
  margin-bottom: 4rem;
}
.hoor_a_img {
  width: 100%;
  padding: 3rem 0rem 3rem 0rem;
  /* border: 1px solid; */
  background: rgb(0 0 0 / 2%);
  margin: 0;
  /* padding: 0; */
}
.hoor_a_img img {
  width: 100%;
  height: 23rem;
  object-fit: none;
  cursor: pointer;
  transition: all 0.6s;
}
.hoor_a_text {
  padding: 3.6rem 3.2rem 3.6rem 3.2rem;
  text-align: inherit;
  background: #ffffff;
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.1);
  border-radius: 0px 0px 4px 4px;
  opacity: 1;
  border: 1px solid #ffffff;
  transition: all 0.6s;
}
.hoor_a_text:hover {
  -webkit-box-shadow: 0px 6px 10px 6px rgb(0 0 0 / 13%);
  box-shadow: 0px 6px 10px 6px rgb(0 0 0 / 13%);
}
.a {
  font-size: 2.4rem;
  font-weight: 400;
  color: rgb(0 0 0 / 85%);
  /* line-height: 36px;  */
}
.b {
  font-size: 1.6rem;
  font-weight: 400;
  margin-top: 2.5rem;
  color: rgba(0, 0, 0, 0.45);
}
.hoor_a_text hr {
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-top: 2.4rem;
}
.cooperation_a {
  width: 27.6rem;
}
.cooperation_a_img {
  /* width: 100%;
  padding: 4rem 0rem 4rem 0rem;
  background: rgb(0 0 0 / 3%);
  margin: 0; */
  width: 100%;
  padding: 4rem 0rem 4rem 0rem;
  background: rgb(0 0 0 / 1%);
  margin: 0;
  /* border-top: 1px solid rgb(0 0 0 / 3%); */
  box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 10%);
  transition: all 0.6s;
  overflow: hidden;
}
.cooperation_a_img img {
  width: 100%;
  object-fit: none;
  transition: all 0.6s;
}
.cooperation_a_text {
  box-shadow: 0px 3px 8px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 4px 4px;
  opacity: 1;
  border: 1px solid #ffffff;
  padding: 2.4rem 3.2rem 2.4rem 3.2rem;
  margin-bottom: 4.8rem;
}
.cooperation_a_text p {
  font-size: 2.4rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.cooperation_a_text:hover {
  -webkit-box-shadow: 0px 6px 10px 6px rgb(0 0 0 / 13%);
  box-shadow: 0px 6px 10px 6px rgb(0 0 0 / 13%);
}
</style>